<!DOCTYPE html>
<html>

<head lang="en">
    <title>日报评论列表</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/news.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function () {
            //获取日报id
            var params = getParams();
            //获取当前登录的用户
            var user = JSON.parse(sessionStorage.getItem("user"));

            //获取装载数据的input框
            var currentInput = $("#currentPage");
            //创建用于存储日报评论的数组
            var dailyArr = [];
            //总页数
            var pages = 1;
            //当前页为第一页
            // currentInput.val(1);

            //获取日报数据的方法
            function query() {
                //获取当前页的值
                var currentPage = currentInput.val();
                $.get('/dailyComments', {
                    currentPage: currentPage,
                    pageSize: 8,
                    dailyId: params.dailyId
                }, function (data) {
                    //合并两个数组到第一个参数数组上
                    $.merge(dailyArr, data.list);
                    //用于渲染时循环,循环时是取list的属性出来
                    var json = {
                        list: dailyArr
                    };
                    //渲染数据
                    $("#dailyComments").renderValues(json, {
                        getHref: getHref,
                        getId: getId
                    });

                    $.each(json.list, function (index, ele) {
                        var temp = "";
                        $.each(ele.child, function (index, ele1) {
                            temp += "<div><p>\n" +
                                "<a href='userProfiles.html?id=" + ele1.user.id + "'>" +
                                "<img class=\"rounded-circle head-img\" src='" + ele1.user.headImgUrl + "'"
                                + " width=\"10%\">\n" +
                                "<span>" + ele1.user.nickName + "</span>\n" +
                                "</a>\n" +
                                "</p>\n" +
                                "<p>\n" +
                                "<span>" + ele1.content + "</span>\n" +
                                "</p>\n" +
                                "<p>\n" +
                                "<span>" + ele1.createTime + "</span>\n" +
                                "<button id='" + ele.id + "' class=\"childComment\" value='" + ele.id + "'>@我</button> \n" +
                                "</p></div>";
                        });
                        temp += "<hr/>";
                        $("#parentId" + ele.id).append(temp);
                    });

                    //设置总页数
                    pages = data.pages;

                    //点击评论中的评论按钮
                    $(".childComment").click(function () {
                        var parentId = $(this).attr("value");
                        // var userId = $(this).closest("div").find("input").first().attr("value");
                        $("#content").val("@" + $(this).closest("div").find("span").first().html() + ": ");
                        $("#parentId").attr("value", parentId);
                    });
                });
                //当前页input框+1
                currentInput.val(parseInt(currentPage) + 1);
            }

            //默认查询第一页的数据
            query();

            //当页面滚动条变化时，执行的函数
            $(window).scroll(function () {
                if ($(document).scrollTop() + $(window).height() >= $(document).height() - 1) {
                    var currentPage = currentInput.val();
                    //判断是否小于或等于最后一页,如果是就去查询
                    if (currentPage <= pages) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经到底了!',
                            autoClose: 500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });
            //把表单变成异步请求的表单
            $("#dailyForm").ajaxForm({
                //提交表单之前会执行的函数 arr就是提交表单时候的参数的数组
                beforeSubmit: function (arr) {
                    arr.push({name: "daily.id", value: params.dailyId});//日报文章id
                    arr.push({name: "user.id", value: user.id});//当前用户id
                },
                //提交成功后执行的函数
                success: function (data) {
                    if (data.success) {
                        //刷新页面
                        window.location.reload();
                    }
                }
            });

            //点击提交按钮
            $("#dailySubmitBtn").click(function () {
                $("#dailyForm").submit();
            });
            //点击清空按钮
            $("#dailyCleanBtn").click(function () {
                $("#content").val("");
            });

            //返回顶部
            //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
            $(window).scroll(function () {
                if ($(window).scrollTop() > 100) {
                    $("#back-to-top").fadeIn(1500);
                }
                else {
                    $("#back-to-top").fadeOut(1500);
                }
            });

            //当点击跳转链接后，回到页面顶部位置
            $("#back-to-top").click(function () {
                //$('body,html').animate({scrollTop:0},1000);
                if ($('html').scrollTop()) {
                    $('html').animate({scrollTop: 0}, 1000);
                    return false;
                }
                $('body').animate({scrollTop: 0}, 1000);
                return false;
            });
        });
    </script>
</head>
<body>
<a name="top"></a>
<span style="font-size:14px"><p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p></span>

<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
    </div>
</div>

<input type="hidden" name="currentPage" id="currentPage" value="1">

<div class="container">
    <h4>日报精彩评论</h4>
    <hr/>
    <div id="dailyComments">
        <div render-loop="list">
            <div class="row detail" render-key="list.id" render-fun="getId">
                <div class="col">
                    <!--<input type="hidden" render-value="list.user.id">-->
                    <p>
                        <a data-href="userProfiles.html?id=" render-key="list.user.id" render-fun="getHref">
                            <img class="rounded-circle head-img" render-src="list.user.headImgUrl" width="10%">
                            <span render-html="list.user.nickName"></span>
                        </a>
                    </p>
                    <p>
                        <span render-html="list.content"></span>
                    </p>
                    <p>
                        <span render-html="list.createTime"></span>
                        <button render-value="list.id" class="childComment">@我</button>
                        <!--<i class="fa fa-thumbs-o-up"></i>
                        <span>0</span>-->
                        <!--<i class="fa fa-commenting fa-fw"></i>
                        <span>0</span>-->
                    </p>
                </div>
                <hr/>
            </div>
        </div>
    </div>
</div>

<div id="dailyComment">
    <form id="dailyForm" method="post" action="/dailyComments">
        <input type="hidden" name="parentId" id="parentId">
        <textarea name="content" class="form-control" id="content">
    </textarea>
    </form>
    <div class="row" style="background:#FFF; color:#FFF">
        <div class="col-6">
            <button class="btn btn-primary dailyCommentBtn" id="dailySubmitBtn">提交</button>
        </div>
        <div class="col-6">
            <button class="btn btn-danger dailyCommentBtn" id="dailyCleanBtn">清空</button>
        </div>
    </div>
</div>

<style>
    #dailyComment {
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .dailyCommentBtn {
        width: 100%;
        margin: 0;
    }

    .container {
        margin-bottom: 100px;
    }

    /*返回顶部*/
    p#back-to-top {
        position: fixed;
        display: none;
        bottom: 100px;
        right: 80px;
    }

    p#back-to-top a {
        text-align: center;
        text-decoration: none;
        color: #d1d1d1;
        display: block;
        width: 64px;
        /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
        -moz-transition: color 1s;
        -webkit-transition: color 1s;
        -o-transition: color 1s;
    }

    p#back-to-top a:hover {
        color: #979797;
    }

    p#back-to-top a span {
        background: transparent url(/img/back-top.png?1202) no-repeat -25px -290px;
        border-radius: 6px;
        display: block;
        height: 64px;
        width: 56px;
        margin-bottom: 5px;
        /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
        -moz-transition: background 1s;
        -webkit-transition: background 1s;
        -o-transition: background 1s;
    }

    #back-to-top a:hover span {
        background: transparent url(/img/back-top.png?1202) no-repeat -25px -290px;
    }
</style>

</body>
</html>